<template>
  <div class="search-result">
    <div class="search-header">
      <h2>搜索结果: "{{ keyword }}"</h2>
      <div class="result-tabs">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="歌曲" name="songs">
            <el-table :data="songResults" style="width: 100%">
              <!-- <el-table-column type="index" width="50"></el-table-column> -->
              <el-table-column
                prop="songName"
                label="歌曲名称"
              ></el-table-column>
              <el-table-column prop="singer" label="歌手"></el-table-column>
              <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-video-play"
                    @click="handlePlay(scope.row)"
                    >播放</el-button
                  >
                  <el-button size="mini" type="text" icon="el-icon-download"
                    ><a :href="scope.row.fileUrl" download>下载</a></el-button
                  >
                </template>
              </el-table-column>
              <!-- <el-table-column prop="album" label="专辑"></el-table-column> -->
              <!-- <el-table-column prop="duration" label="时长"></el-table-column> -->
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="歌手" name="singers">
            <div class="singer-grid">
              <el-card
                v-for="singer in singerResults"
                :key="singer.singerId"
                class="singer-card"
              >
                <div
                  @click="handleSingerClick(singer.singerId, singer.avatarUrl)"
                >
                  <image-preview :src="singer.avatarUrl" />
                  <div class="singer-name">{{ singer.singerName }}</div>
                </div>
              </el-card>
            </div>
          </el-tab-pane>

          <el-tab-pane label="专辑" name="albums">
            <div class="album-grid">
              <el-card
                v-for="album in albumResults"
                :key="album.albumId"
                class="album-card"
              >
                <div @click="handleAlbumClick(album.albumId, album.imgUrl)">
                  <image-preview :src="album.imgUrl" />
                  <!-- <img :src="album.cover" class="album-cover" /> -->
                  <div class="album-info">
                    <div class="album-name">{{ album.albumName }}</div>
                    <div class="album-singer">{{ album.singer }}</div>
                  </div>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { searchSong, searchSinger, searchAlbum } from "@/api/search/search";
import { addHistory } from "@/api/history/history";
export default {
  name: "SearchResult",
  data() {
    return {
      keyword: "",
      activeTab: "songs",
      songResults: [],
      singerResults: [],
      albumResults: [],
    };
  },
  created() {
    this.keyword = this.$route.query.keyword;
    this.searchContent();
  },
  methods: {
    // 歌曲点击
    handlePlay(row) {
      const data = {
        songId: row.songId,
        userId: localStorage.getItem("userId"),
      };
      //记录用户播放次数
      addHistory(data).then((res) => {
        console.log("播放次数", res);
      });
      //添加用户的行为信息到本地存储
      const index = localStorage.getItem("index");
      localStorage.removeItem("index");

      const userActionData = JSON.stringify({
        userId: localStorage.getItem("userId"),
        songId: row.songId,
        action: "play",
      });
      localStorage.setItem(parseInt(index) + 1, userActionData);

      //index加一
      localStorage.setItem("index", parseInt(index) + 1);

      const songIds = this.songResults.map((item) => item.songId);
      const currentSongIndex = songIds.indexOf(row.songId);
      this.$router.push({
        path: "/player",
        query: { currentSongIndex: currentSongIndex, songIds: songIds },
      });
    },
    // 歌手点击
    handleSingerClick(singerId, avatarUrl) {
      this.$router.push({
        path: "/userSinger",
        query: {
          singerId: singerId,
          imgUrl: avatarUrl,
        },
      });
    },
    handleAlbumClick(albumId, imgUrl) {
      this.$router.push({
        path: "/albums",
        query: {
          albumId: albumId,
          imgUrl: imgUrl,
        },
      });
    },

    // 搜索内容
    searchContent() {
      const data = {
        keyword: this.keyword,
        userId: localStorage.getItem("userId"),
      };
      searchSong(data).then((res) => {
        console.log("搜索歌曲结果", res);
        this.songResults = res;
      });

      searchSinger(this.keyword).then((res) => {
        console.log("搜索歌手结果", res);
        this.singerResults = res;
      });

      searchAlbum(this.keyword).then((res) => {
        console.log("搜索专辑结果", res);
        this.albumResults = res;
      });
      //添加用户的行为信息到本地存储
      const index = localStorage.getItem("index");
      localStorage.removeItem("index");

      const userActionData = JSON.stringify({
        userId: localStorage.getItem("userId"),
        keyword: this.keyword,
        action: "search",
      });
      localStorage.setItem(parseInt(index) + 1, userActionData);

      //index加一
      localStorage.setItem("index", parseInt(index) + 1);
    },
    handleTabClick(tab) {
      // 处理标签页切换
      console.log(tab.name);
    },
  },
  watch: {
    "$route.query.keyword": {
      handler(newKeyword) {
        this.keyword = newKeyword;
        this.searchContent();
      },
    },
  },
};
</script>

<style scoped>
.search-result {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 64px;
}

.search-header {
  margin-bottom: 20px;
}

.search-header h2 {
  margin-bottom: 20px;
  color: #333;
}

.singer-grid,
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.singer-card,
.album-card {
  text-align: center;
}

.singer-image,
.album-cover {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  margin-bottom: 10px;
}

.singer-name,
.album-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.album-singer {
  font-size: 14px;
  color: #666;
}
</style>
